<template>
  <div>
    <el-select v-model="selectValue" placeholder="请选择" :allow-create="true" @change="change">
      <el-option
        v-for="item in options"
        :key="item.docCount"
        :label="item.value"
        :value="item.docCount"
      >
      </el-option>
    </el-select>
    <el-button @click="add">新增</el-button>

    <el-dialog :visible="show" title="新增选择项" :destroy-on-close="true" :show-close="false" v-html="content">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible">取 消</el-button>
        <el-button type="primary" @click="dialogVisible"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: { options: { required: true, type: Array },listurl:{required: true, type:String}, addurl:{required:true, type:String}, content:{required:true, type:String}},
  data() {
    return {
      show: false,
      selectValue: undefined,
      addSelect:{
          value:'',
          docCount:''
      }
    };
  },
  created() {
      axios.get(this.listurl, {})
        .then(response => {
            for(var i =0;i < response.data.length;i++){
                this.options.push(response.data[i])
            }
        })
        .catch(error => {
            console.log(error);
        });
  },
  methods: {
      change(value){
        this.$emit("select-change", value)
      },
    add() {
      this.show = true;
      this.addSelect={
          value:'',
          docCount:''
      }
    },
    dialogVisible() {
        this.options.push(this.addSelect)
        this.show = false;
        this.addSelect={
          value:'',
          docCount:''
      }
    },
  },
};
</script>